<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <title>Example</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./plugins/swiper/swiper-bundle.min.css">
    <script src="./js/vue.min.js"></script>
    <link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
</head>

<body>
    <div id="app">
        <m-Header></m-Header>
        <main>
            <div class="game">
                <div class="game-menu">
                    <div class="game-bakery">
                        <a class="home" href="/">Home</a>
                        <a v-if="typeName" :href="typePath"><span style="margin-right: 10px;">/</span>{{typeName}}</a>
                    </div>
                    <div class="game-menu-content">
                        <img class="game-menu-content-logo" :src="detail.gameLogo" :alt="detail.gameName">
                        <div class="game-menu-content-wrapper">
                            <span class="game-name">{{detail.gameName}}</span>
                            <div class="game-other">
                                <span class="game-other-rate">{{(detail.gameScore * 0.5).toFixed(1)}}</span>
                                <div class="game-other-tags">
                                    <span class="game-other-tag" v-for="tag in detail.gameTypeList">
                                        {{tag.gameTypeName}}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="play view" :class="{disable: loading}" @click="handleToPlay">PLAY NOW</div>
                    </div>

                </div>
            </div>

            <div class="waterfall">
                <div class="waterfall-left">
                    <div class="game-desc">
                        <h1>Description</h1>
                        <div>
                            {{detail.gameDesc}}
                        </div>
                    </div>
                    <div class="ad">
                        <div class="ad-wrapper"></div>
                        <span>Advertisement</span>
                    </div>
                </div>
                <div class="waterfall-right">
                    <div class="game-recommed">
                        <h4>Games Recommend</h4>
                        <a :href="handleToDetail(game.gameId)" v-for="game in recommend">
                            <div class="game-recommed-logo">
                                <img :src="game.gameLogo" :alt="game.gameName">
                            </div>
                            <div class="game-recommed-content">
                                <span class="game-recommed-name">{{game.gameName}}</span>
                                <!-- <span class="game-recommed-rate">5.0</span> -->
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <m-Hot></m-Hot>
        </main>
        <m-Footer></m-Footer>
    </div>
</body>
<script src="./main.js"></script>
<script src="./plugins/swiper/swiper-bundle.min.js"></script>
<script type="module">
    import { Header, Footer } from './components/index.js'
    import Hot from './components/hot.js'
    var vm = new Vue({
        el: '#app',
        components: {
            mHeader: Header,
            mFooter: Footer,
            mHot: Hot
        },
        data() {
            return {
                id: 0,
                typeName: '',
                typeId: 0,
                detail: {},
                loading: true,
                recommend: []
            }
        },
        computed: {
            imgUrl() {
                return `./imgs/${this.name.toLowerCase()}.webp`
            }
        },
        computed: {
            typePath() {
                return `type.html?name=${this.typeName}&id=${this.typeId}`
            }
        },
        created() {
            this.id = getQueryVariable('id') || 2713
            this.typeName = getQueryVariable('name')
            this.typeId = getQueryVariable('typeId')
            this.getGameDetail()
        },
        mounted() {
        },
        methods: {
            handleToPlay() {
                if (this.loading) return
                location.href = './play.html'
            },
            handleToDetail(id) {
                return `./detail.html?id=${id}`
            },
            getGameDetail() {
                fetch('https://www.migame.vip/gamefront/gameList/tempGameDetails', {
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    },
                    method: 'post',
                    body: JSON.stringify({
                        gameChannelId: 0,
                        gameId: this.id
                    })
                })
                    .then(res => res.json())
                    .then(res => {
                        this.detail = res.data
                        this.recommend = res.data.gameListIndexVos.splice(0, 12)
                        document.title = res.data.gameName
                        document.head.querySelector('meta[name="description"]').setAttribute('content', res.data
                            .gameDesc)
                        this.loading = false
                        if (res.data.gameScreenDirection == 2) {
                            localStorage.setItem('direction', true)
                        } else {
                            localStorage.removeItem('direction')
                        }
                        localStorage.setItem('gameName', res.data.gameFileName)
                    })
                    .catch(function (error) {
                        // 请求失败后执行的回调函数
                        console.log('error:', error)
                    })
            },
        }
    })
</script>

</html>